<template>

	<view v-if="orderInfo" class="x-product-and-delivery">
		<!-- 提交订单 -->
		
		<view class="border"></view>

		<view class="shop">
			
			<x-product-item  v-for="(item, index) in orderInfo.orderDetailEntityList" :key="index" :orderInfo="item"></x-product-item>
		</view>

		<view class="input" @click="onSelectDeliverType">
			<view>配送</view>
			<view class="picker">
				<view class="placeholder" v-if="orderInfo.pickingType == 0">自提</view>
				<view class="placeholder" v-else>快递包邮</view>
				<u-icon name="arrow-right" color="xIconColor()" size="10"></u-icon>
			</view>
		</view>
		<view class="input border_bottom">
			<view>留言</view>
			<input type="text" placeholder="选填:填写内容需和商家协商确认" v-model="orderInfo.remark" @input="onChangeRemark" />
		</view>

		<view class="border"></view>
	</view>
</template>

<script>
	import {
		ThemeMixin
	} from '@/mixins/theme/xThemeMixin.js'
	import XProductItem from './xProductItem.vue'
	
	export default {
		mixins: [ThemeMixin],
		components:{
			XProductItem,
		},
		props: {
			data: {
				type: Object,
				default: [],
			},
			type: {
				type:Number,
				default: 0,
			}
		},
		data() {
			return {
				orderInfo: null,
				imageUrl: this.$Config.imageUrl,
				levels: [{
						code: 1,
						name: '一等奖'
					},
					{
						code: 2,
						name: '二等奖'
					},
					{
						code: 3,
						name: '三等奖'
					},
					{
						code: 4,
						name: '四等奖'
					},
					{
						code: 5,
						name: '五等奖'
					},
					{
						code: 6,
						name: '六等奖'
					}
				],
			}
		},
		mounted() {
			this.orderInfo = this.data
			console.log(3333,this.data,this.orderInfo)
		},
		methods: {
			// @deliver="emitDeliver" @msg="emitMsg"
			onSelectDeliverType() {
				uni.showActionSheet({
					itemList: ['自取', '包邮'],
					success: (res) => {
						this.orderInfo.pickingType = res.tapIndex;
						this.$emit('deliver', this.orderInfo.pickingType)
					}
				})
			},
			onChangeRemark(e) {
				// detail = {html, text, delta}
				console.log("onChangeRemark e=", e)
				this.$emit('msg', this.orderInfo.remark)
			}
		}
	}
</script>

<!-- 购买订单 -->
<style lang="scss" scoped>
	.shop {
		width: 100%;
		// background-color: #f1f1f1;
		// margin: 20rpx auto;
		// border-top: 1px solid #F5F5F5;

		.shop_item {
			// margin: 20rpx auto;
			// background-color: #fff;
			// border-radius: 10rpx;
			// padding: 20rpx 0rpx;


		}
	}

	.border {
		width: 100%;
		height: 20rpx;
		background-color: #f0f0f0;
	}
</style>


<style lang="scss" scoped>
	.input {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 90rpx;
		font-size: 28rpx;
		// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	
		.picker {
			display: flex;
			align-items: center;
	
			&>image {
				width: 36rpx;
				height: 36rpx;
				font-size: 28rpx;
				margin-left: 10rpx;
			}
	
			.placeholder {
				font-size: 28rpx;
				color: #707070;
			}
		}
	
		&>input {
			width: 440rpx;
			font-size: 28rpx;
			text-align: right;
		}
	}
</style>


<!-- 大转盘、积分、扫码中奖订单 -->
<style lang="scss" scoped>
	// 	.goods {
	// 		margin: 20rpx auto;
	// 		background-color: #f0f0f0;
	// 		padding: 0 20rpx;
	// 		height: 220rpx;
	// 		display: flex;
	// 		justify-content: center;

	// 		&>image {
	// 			width: 220rpx;
	// 			height: 100%;
	// 			border-radius: 8rpx;
	// 			margin-right: 20rpx;
	// 		}

	// 		.goods_info {
	// 			padding: 20rpx 0;
	// 			display: flex;
	// 			flex-direction: column;
	// 			justify-content: space-between;

	// 			.goods_title {
	// 				width: 440rpx;
	// 				font-size: 30rpx;
	// 				overflow: hidden;
	// 				text-overflow: ellipsis;
	// 				display: -webkit-box;
	// 				-webkit-box-orient: vertical;
	// 				-webkit-line-clamp: 2;
	// 				font-weight: bold;
	// 			}

	// 			.goods_num {
	// 				display: flex;
	// 				align-items: center;
	// 				justify-content: space-between;
	// 				font-size: 26rpx;

	// 				.goods_level {
	// 					font-size: 32rpx;
	// 					font-weight: bold;
	// 				}
	// 			}
	// 		}
	// 	}

	// 	.input {
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		padding: 0 20rpx;
	// 		height: 90rpx;
	// 		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

	// 		.picker {
	// 			display: flex;
	// 			align-items: center;

	// 			&>image {
	// 				width: 36rpx;
	// 				height: 36rpx;
	// 				font-size: 28rpx;
	// 				margin-left: 10rpx;
	// 			}

	// 			.placeholder {
	// 				font-size: 28rpx;
	// 				color: #707070;
	// 			}
	// 		}

	// 		&>input {
	// 			width: 440rpx;
	// 			font-size: 28rpx;
	// 			text-align: right;
	// 		}
	// 	}

	// .order_info {
	// 	font-size: 28rpx;
	// 	height: 90rpx;
	// 	text-align: right;
	// 	line-height: 90rpx;
	// 	padding: 0 20rpx;
	// }
</style>